Web Development Form Data Validate করা এবং Submit করা গাইড ও নোট

Framework7 দিয়ে ফর্ম ডেটা ভ্যালিডেশন এবং সাবমিশন করা সহজ এবং কার্যকর। Framework7 এর বিল্ট-ইন ক্লাস এবং জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে ফর্ম ডেটা যাচাই (validate) এবং সার্ভারে পাঠানো (submit) সম্ভব।

ফর্ম তৈরি করা

Framework7 এ একটি সাধারণ ফর্ম HTML দিয়ে তৈরি করা যায়।

উদাহরণ:

<div class="page" data-name="form">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Form Validation</div>
    </div>
  </div>
  <div class="page-content">
    <form id="my-form" class="list">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" name="name" placeholder="Enter your name" required>
                <span class="input-error-message">Name is required</span>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Email</div>
              <div class="item-input-wrap">
                <input type="email" name="email" placeholder="Enter your email" required>
                <span class="input-error-message">Valid email is required</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="block">
        <button type="submit" class="button button-fill">Submit</button>
      </div>
    </form>
  </div>
</div>

ফর্ম ডেটা ভ্যালিডেট করা

Framework7-এ form-validate ক্লাস ব্যবহার করে বিল্ট-ইন ভ্যালিডেশন কার্যকর করা যায়। তবে জাভাস্ক্রিপ্ট দিয়ে কাস্টম ভ্যালিডেশনও করা সম্ভব।

বিল্ট-ইন ভ্যালিডেশন ব্যবহার করা

HTML5 এর required অ্যাট্রিবিউট এবং Framework7 এর ক্লাস ব্যবহার করে সহজে ভ্যালিডেশন নিশ্চিত করা যায়।

উদাহরণ:

<input type="text" name="name" required>
<span class="input-error-message">This field is required</span>

কাস্টম জাভাস্ক্রিপ্ট দিয়ে ভ্যালিডেশন

document.getElementById('my-form').addEventListener('submit', function (e) {
  e.preventDefault(); // ফর্ম সাবমিট বন্ধ করে
  var name = this.querySelector('[name="name"]').value.trim();
  var email = this.querySelector('[name="email"]').value.trim();

  if (!name) {
    app.dialog.alert('Name is required');
    return;
  }

  if (!email || !validateEmail(email)) {
    app.dialog.alert('Valid email is required');
    return;
  }

  app.dialog.alert('Form is valid!');
});

// ইমেইল ভ্যালিডেশন ফাংশন
function validateEmail(email) {
  var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

ফর্ম ডেটা সাবমিট করা

Framework7 এর মাধ্যমে ফর্ম ডেটা সংগ্রহ করা

Framework7 এর formData ফাংশন দিয়ে সহজে ফর্ম ডেটা সংগ্রহ করা যায়।

উদাহরণ:

var formData = app.form.convertToData('#my-form');
console.log(formData); // ফর্ম ডেটা দেখাবে

ফর্ম ডেটা সাবমিট করা (AJAX ব্যবহার করে)

document.getElementById('my-form').addEventListener('submit', function (e) {
  e.preventDefault();

  var formData = app.form.convertToData('#my-form');

  app.request.post('https://example.com/api/submit', formData, function (response) {
    app.dialog.alert('Form submitted successfully!');
  }, function (error) {
    app.dialog.alert('Error submitting the form.');
  });
});

ফর্ম ডেটা ভ্যালিডেশন এবং সাবমিশনের প্রক্রিয়া

সম্পূর্ণ কোড:

<div id="app">
  <div class="view view-main">
    <div class="page" data-name="form">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Form Validation</div>
        </div>
      </div>
      <div class="page-content">
        <form id="my-form" class="list">
          <ul>
            <li>
              <div class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Name</div>
                  <div class="item-input-wrap">
                    <input type="text" name="name" required>
                    <span class="input-error-message">Name is required</span>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Email</div>
                  <div class="item-input-wrap">
                    <input type="email" name="email" required>
                    <span class="input-error-message">Valid email is required</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="block">
            <button type="submit" class="button button-fill">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  var app = new Framework7({
    root: '#app',
  });

  document.getElementById('my-form').addEventListener('submit', function (e) {
    e.preventDefault();

    var formData = app.form.convertToData('#my-form');

    // ফর্ম ভ্যালিডেশন
    if (!formData.name) {
      app.dialog.alert('Name is required');
      return;
    }
    if (!formData.email || !validateEmail(formData.email)) {
      app.dialog.alert('Valid email is required');
      return;
    }

    // ফর্ম সাবমিট
    app.request.post('https://example.com/api/submit', formData, function (response) {
      app.dialog.alert('Form submitted successfully!');
    }, function (error) {
      app.dialog.alert('Error submitting the form.');
    });
  });

  function validateEmail(email) {
    var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
</script>

Framework7 দিয়ে ফর্ম ডেটা যাচাই এবং সাবমিট করা খুবই সহজ। এটি HTML5 এর বিল্ট-ইন ভ্যালিডেশন সমর্থন করে এবং জাভাস্ক্রিপ্টের মাধ্যমে কাস্টম ভ্যালিডেশন ও AJAX সাবমিশন সম্ভব। Framework7 এর ফর্ম API ব্যবহার করে ফর্ম ডেটা ম্যানেজ করা দ্রুত এবং কার্যকর।